<template>
  <div class="forgetVue">
    <div class="forgetVueMain relative">
      <div class="forgetVueMun absmiddle">
        <div class="forgetVueSteps">
          <Steps :current="current">
            <Step title="账号"></Step>
            <Step title="身份"></Step>
            <Step title="新密码"></Step>
            <Step title="完成"></Step>
          </Steps>
        </div>
        <div class="forgetVueList">
          <!--输入账号-->
          <div class="forgetVueOne" v-if="current === 0">
            <ul>
              <li>
                <article class="forgetArticle">
                  <Input type="text" v-model="submitAccount" placeholder="请输入登录用户名" class="forgetName"></Input><br/>
                </article>
              </li>
            </ul>
            <div class="forgetBtn" @click="forgetNameEvent">下一步</div>
            <div class="forgetText"><p>温馨提示：如需帮助，请联系</p>
              <a :href="_Api.customerLink" target="_blank">在线客服</a></div>
          </div>
          <!--身份验证-->
          <div class="forgetVueOne" v-if="current === 1">
            <ul>
              <li>
                <article class="forgetArticle">
                  <div class="forgetCellDiv">
                    {{_Filter.phoneFormate(phoneNumber)}}
                  </div>
                </article>
              </li>
              <li>
                <article class="forgetArticle forgetPosition">
                  <Input type="text" v-model="submitVCode" placeholder="请输入验证码" class="forgetVCode"></Input>
                  <div class="userItemTextV" @click="verifyingCodedEvent">{{verifyingName}}</div>
                </article>
              </li>
            </ul>
            <div class="forgetBtn" @click="verifyingCodeEvent">下一步</div>
          </div>
          <!--新密码-->
          <!--输入账号-->
          <div class="forgetVueOne" v-if="current === 2">
            <ul>
              <li>
                <article class="forgetArticle">
                  <Input type="password" v-model="submitSuccess.newsPaw" placeholder="请输入新的密码"
                         class="forgetPassword"></Input><br/>
                </article>
              </li>
              <li>
                <article class="forgetArticle">
                  <Input type="password" v-model="submitSuccess.atypism" placeholder="请再次输入密码"
                         class="forgetPassword"></Input><br/>
                </article>
              </li>
            </ul>
            <div class="forgetBtn forgetPawsBtn" @click="forgetNewsPawEvent">下一步</div>
          </div>
          <!--修改成功-->
          <div class="amendSuccess" v-if="current === 3">
            <p><img :src="successImg" alt=""></p>
            <p>恭喜您！密码修改成功...</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import './forget.scss';

  export default {
    data() {
      return {
        current: 0,//当前步骤
        //账号
        submitAccount: '',
        verifyingName: '点击获取验证码',
        successImg: require('../../../assets/images/theUser/forget/xgcg.png'),
        submitVCode: '', //验证码
        submitSuccess: {
          newsPaw: '',
          atypism: ''
        }, //密码
        countdown: 60,
        verifyingCode: '',
        phoneNumber: ''
      }
    },
    activated(){
      this.clearData();
    },
    methods: {
      //用户名
      forgetNameEvent() {
        let that = this;
        if (!that.submitAccount) {
          that._Util.showAlert('登录用户名输入有误');
          return;
        }
        that.forgetNameInterface(that.submitAccount);
      },
      forgetNameInterface(name) {
        let that = this;
        that._Util.post(that, that._Api.POST_CHECK_MEMBER_DATA, {username: name}, (data, dataOld) => {
          if (parseInt(dataOld.code) === 99 || parseInt(dataOld.code) === 2) {
            that._Util.showAlert(dataOld.msg);
            return;
          }
          that.phoneNumber = data||'';
          that.currentNext();
        },(data) => {
          if (parseInt(data.code) === 99 || parseInt(data.code) === 2) {
            that._Util.showAlert(data.msg);
            return;
          }
        });
      },
      //清除数据
      clearData(){
        this.submitAccount = '';
        this.submitVCode = '';
        this.submitSuccess = {
          newsPaw: '',
          atypism: ''
        };
        this.phoneNumber = '';
        this.current = 0;
        this.verifyingName = '点击获取验证码';
        this.countdown = 60;
      },
      //验证码
      verifyingCodeEvent() {
        let that = this;
        if (!that.submitVCode) {
          that._Util.showAlert('验证码输入有误');
          return;
        }
        that.verifyingSubmitEvent(that.submitVCode);
      },
      verifyingSubmitEvent(code) {
        let that = this;
        that._Util.post(that, that._Api.POST_CHECK_CODE_DATA, {
          phone: that.phoneNumber,
          code: code
        }, (data, dataOld) => {
          if (parseInt(dataOld.code) === -1) {
            that._Util.showAlert(dataOld.msg);
            return;
          }
          that.currentNext();
        });
      },
      verifyingFCode() {
        let that = this;
        if (that.countdown === 0) {
          that.verifyingName = '点击获取验证码';
          that.countdown = 60;
          clearInterval(that.thatSetInter);
        } else {
          that.verifyingName = '重新发送' + that.countdown;
          that.countdown--;
        }
      },
      verifyingSetTime() {
        let that = this;
        clearInterval(that.thatSetInter);
        that.thatSetInter = setInterval(function () {
          that.verifyingFCode();
        }, 1000);
      },
      verifyingCodedEvent() {
        let that = this;
        that._Util.post(that, that._Api.POST_SEND_CODE_DATA, {phone: that.phoneNumber}, (data) => {
          that._Util.showAlert('验证码已发送');
          that.verifyingSetTime();
        });
      },
      //新密码
      forgetNewsPawEvent() {
        let that = this;
        if (!that.submitSuccess.newsPaw || that.submitSuccess.newsPaw.length < 6 || that.submitSuccess.newsPaw.length > 12) {
          that._Util.showAlert('新密码输入有误');
          return;
        }
        if (that.submitSuccess.newsPaw !== that.submitSuccess.atypism) {
          that._Util.showAlert('两次密码输入不一致');
          return;
        }
        let params = {
          username: that.submitAccount || '',
          code: that.submitVCode || '',
          newPassword: that._Util.hexMd5(that.submitSuccess.newsPaw) || '',
        }
        that._Util.post(that, that._Api.POST_FORGET_PASSWORD, params, (data) => {

          that.currentNext();
        },'','post');
      },
      currentNext() {
        this.current += 1;
      }
    }
  }
</script>
